<template>
  <div class="custom-flex-cont-vertical">
    <el-form :inline="true" size="mini" class="custom-form" label-width="auto">
      <el-form-item label="规则名称">
        <el-input v-model="queryParams.limitName" placeholder="输入关键词"></el-input>
      </el-form-item>
      <el-form-item label="规则类型">
        <el-input v-model="queryParams.limitType" placeholder="输入关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" @click="openAddEdit()" v-if="hasPerm('iplimit-add')"><i
        class="fa fa-plus-circle"></i>&nbsp;新增规则
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, true)"
                 v-if="hasPerm('iplimit-enable')"><i class="fa fa-unlock"></i>&nbsp;启用规则
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, false)"
                 v-if="hasPerm('iplimit-enable')"><i class="fa fa-lock"></i>&nbsp;禁用规则
      </el-button>
      <el-button size="mini" plain type="danger" v-bind:disabled="selectedRows.length==0" @click="deletePerms()"
                 v-if="hasPerm('iplimit-del')"><i class="fa fa-trash"></i>&nbsp;删除规则
      </el-button>
    </el-row>
    <el-alert
      type="info"
      :closable="false"
      style="margin: 10px 0 0 0"
      show-icon>
      <template slot="title">
        「起效需刷新网关」<b>黑名单：</b>录入的IP或域名将限制访问指定接口；<b>白名单：</b>指定接口只有录入的IP或域名才能访问。
      </template>
    </el-alert>
    <!--查询结果列表-->
    <div class="custom-flex-cont-vertical fit-all custom-shadow">
      <el-table
        :data="tableData"
        @selection-change="multiSelectedChange">
        <template slot="empty">
          <empty-tip></empty-tip>
        </template>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="55">
        </el-table-column>
        <el-table-column
          prop="limitName"
          label="规则名称">
        </el-table-column>
        <el-table-column
          prop="limitType"
          label="规则类型">
          <template slot-scope="scope">
            <span v-if="scope.row.limitType==='1'" class="white-limit">白名单</span>
            <span v-else class="black-limit">黑名单</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="limitIp"
          label="限制IP/域名">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template slot-scope="scope">
            <el-tag type="success" size="medium" v-if="scope.row.state===1">启用</el-tag>
            <el-tag type="danger" size="medium" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="130">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('iplimit-update')">
              <el-button type="text" @click="openAddEdit(scope.row)"><i class="fa fa-edit"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="禁用" v-if="hasPerm('iplimit-enable')&&scope.row.state===1">
              <el-button type="text" @click="enablePerms(scope.row.id, false)"><i class="fa fa-ban text-danger"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="启用" v-if="hasPerm('iplimit-enable')&&scope.row.state===0">
              <el-button type="text" @click="enablePerms(scope.row.id, true)"><i
                class="fa fa-check-circle text-success"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" v-if="hasPerm('iplimit-del')&&scope.row.intPersist!==1">
              <el-button type="text" @click="deletePerms(scope.row.id)"><i class="fa fa-trash text-danger"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="custom-pagination"
        @current-change="query"
        :current-page.sync="queryParams.pageNumber"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableDataTotal"
        style="text-align:right;">
      </el-pagination>
    </div>
    <!--新增/修改-->
    <add-edit-ipimit-dialog v-if="showEditForm" :show.sync="showEditForm" :editData="editData"></add-edit-ipimit-dialog>
  </div>
</template>

<script>
  import AddEditIpimitDialog from './AddEditIpimitDialog'

  export default {
    name: "index",
    components: {
      AddEditIpimitDialog
    },
    data() {
      return {
        showEditForm: false,
        editData: null,
        queryParams: {
          limitName: '',
          limitType: '',
          pageNumber: 1,
          pageSize: 10
        },
        tableData: [],
        tableDataTotal: 0,
        selectedRows: []
      }
    },
    mounted: function () {
      this.query();
    },
    methods: {
      openAddEdit: function (data) {
        if (data)
          this.editData = data;
        else
          this.editData = null;
        this.showEditForm = true;
      },
      query: function (currPage) {
        if (!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-system/gateway/iplimit/page', this.queryParams)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = parseInt(data.data.total);
            this.loading = false;
          });
      },
      multiSelectedChange: function (val) {
        this.selectedRows = val;
      },
      deletePerms: function (id) {
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            if (!id && this.selectedRows.length > 0) {
              this.selectedRows.forEach(function (_s, index, arr) {
                _ids.push(_s.id);
              });
            } else
              _ids.push(id);
            this.api.post('/bucket-system/gateway/iplimit/del', {id: _ids.join(',')})
              .then((data) => {
                if (data.code === 200) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                } else {
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
      enablePerms: function (id, enable) {
        let _ids = [];
        let _url = '/bucket-system/gateway/iplimit/disable';
        if (!id && this.selectedRows.length > 0) {
          this.selectedRows.forEach(function (_s, index, arr) {
            _ids.push(_s.id);
          });
        } else
          _ids.push(id);
        if (enable)
          _url = '/bucket-system/gateway/iplimit/enable';
        this.api.post(_url, {id: _ids.join(',')})
          .then((data) => {
            if (data.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            } else {
              this.$message.error(data.data);
            }
          });
      },
      checkSelectabled(row) {
        if (row.intPersist === 1)
          return false;
        return true;
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .white-limit, .black-limit {
    padding: 5px;
  }

  .white-limit {
    background-color: #f2f6fc;
    color: #606266;
  }

  .black-limit {
    background-color: #303133;
    color: #ebeef5;
  }
</style>
